<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>保养工单</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/app.css"/>
		<link href="../../css/mui.indexedlist.css" rel="stylesheet" />
		<style>
			* { touch-action: none; }
			html, body {
				height: 100%;
				overflow: hidden;
			}
			.mui-bar {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			body{
				background: #ffffff;
			}
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
	
			.oa-contact-avatar {
				width: 75px;
			}
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			.oa-contact-content {
				width: 100%;
			}
			.oa-contact-name {
				margin-right: 20px;
			}
			.oa-contact-name, oa-contact-position {
				float: left;
			}
			.mui-bar{
				background:#4F77AA ;
				color: #ffffff;
				-webkit-box-shadow: 0 0 1px rgba(0,0,0,0);
    			box-shadow: 0 0 1px rgba(0,0,0,0);
			}
			.mui-title{
				color: #ffffff;
			}
			a{
				color:#ffffff;
			}
			.mui-content{
				background: #ffffff;
			}
			.content_item ul li .mui-pull-left{
				width: 60px;
				height: 60px;
				max-width: 60px;
				text-align: center;
				line-height: 60px;
				font-size: 16px;
				color: #ffffff;
			}

			.mui-content ul li a span{
				/*padding-right: 15px;*/
				/*color:#4F77AA ;*/
			}
			.mui-search input.seach{
				width: 70%;
				padding-left: 30px;
				margin: 0;
				border-radius: 50px 50px;
				font-size:14px;
			}
			.mui-search input.seach_button{
				width:80px;
				height:40px;
				color:#ffffff;
				background: #4F77AA;
				border-radius: 5px;
			}
			.mui-search{
				padding: 15px;
			}
			.mui-search i{
				font-size: 24px;
				position: absolute;
				left: 20px;
				margin-top:10px;
			}
			.mui-select{
				width: 33.33%;
				float: left;
			}
			.mui-select select{
				background: #EFEFF4;
				border-radius: 0;
			}
			.mui-select-content{
				width:100%;
				height:41px;
				background: #EFEFF4;
			}
			.mui-content{
				width:100%;
				height:100%;
			}
			.content_item{
				width:100%;
				height:calc(100% - 111px);
			}
			.content_item .mui-control-content{
				width:100%;
				height:100%;
			}
			.color-primary{
				color: #1ab394;
			}
			.color-success {
				color: #1c84c6;
			}
			.color-info {
				color: #23c6c8;
			}
			.color-warning {
				color: #f8ac59;
			}
			.color-finish{
				background:#09AE0A;
			}
			.color-run{
				background:#F8C217;
			}
			.color-unfinish{
				background:#54B5F8;
			}
			p.mui-ellipsis-title{
				font-size: 16px;
				/*font-weight:bold;*/
				color:#000000;
			}
		</style>
	</head>

	<body>
		<header id="header" class="mui-bar mui-bar-nav">
			<span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></span>
			<h1 class="mui-title">保养工单</h1>
			<!--<img src="../../img/sao.png" style="width: 24px;height: 24px;margin-top: 10px;"/>-->
			<i class="mui-pull-right icon iconfont icon-saoyisao"  id="openscan"  style="font-size: 24px;margin-top:10px;"></i>
		</header>
		
		<div class="mui-content">
			<div class="mui-search">
				<label><i class="icon iconfont icon-sousuo"></i></label><input class="seach" type="text"  placeholder="设备编码，设备名称"/>
				<input class="seach_button" type="button" value="搜索">
			</div>
			<div class="mui-select-content">
			<div class="mui-select">
				<select class="mui-h5" style="margin:auto; color:#000;">
					<option value="">状态</option>
					<option value="1">未完成</option>
					<option value="1">已完成</option>
				</select>
			</div>
			<div class="mui-select">
				<select class="mui-h5" style="margin:auto; color:#000;">
					<option value="">时间</option>
					<option value="1">今日</option>
					<option value="1">本周</option>
					<option value="1">本月</option>
				</select>
			</div>
			<div class="mui-select">
				<select class="mui-h5" style="margin:auto; color:#000;">
					<option value="">全部</option>
					<option value="1">我保养</option>
				</select>
			</div>
			</div>
			<div class="content_item">
				<div id="item1" class="mui-control-content mui-active">
					<div id="scroll" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell mui-media">
										<div class="mui-media-object mui-pull-left color-finish"><span style="">已完成</span></div>
										<div class="mui-media-body">
											<p class='mui-ellipsis mui-ellipsis-title'>20000L 蒸压釜</p>
											<p class='mui-ellipsis'>设备编码：0076</p>
											<p class='mui-ellipsis'>保养单号：BY-20190826001</p>
											<p class='mui-ellipsis'>保养人员：</p>
											<p class='mui-ellipsis'>保养时间：2019-08-26 00:00</p>
										</div>
								</li>
								<li class="mui-table-view-cell mui-media">
										<div class="mui-media-object mui-pull-left color-run"><span class="" style="">保养中</span></div>
										<div class="mui-media-body">
											<p class='mui-ellipsis mui-ellipsis-title'>20000L 蒸压釜</p>
											<p class='mui-ellipsis'>设备编码：0076</p>
											<p class='mui-ellipsis'>保养单号：BY-20190826001</p>
											<p class='mui-ellipsis'>保养人员：</p>
											<p class='mui-ellipsis'>保养时间：2019-08-26 00:00</p>
										</div>
								</li>
								<!--图标是图-->
								<!--<li class="mui-table-view-cell mui-media">
										<img class="mui-media-object mui-pull-left" src="../../img/shuijiao.jpg">
										<div class="mui-media-body">
											<p class='mui-ellipsis'>计划编号：20190825001</p>
											<p class='mui-ellipsis'>计划名称：日检</p>
											<p class='mui-ellipsis'>位置范围：</p>
											<p class='mui-ellipsis'>计划时间：08-25 13.51 至 08-25 15.51</p>
										</div>
								</li>-->
								<li class="mui-table-view-cell mui-media">
										<div class="mui-media-object mui-pull-left color-unfinish"><span class="" style="">待保养</span></div>
										<div class="mui-media-body">
											<p class='mui-ellipsis mui-ellipsis-title'>20000L 蒸压釜</p>
											<p class='mui-ellipsis'>设备编码：0076</p>
											<p class='mui-ellipsis'>保养单号：BY-20190826001</p>
											<p class='mui-ellipsis'>保养人员：</p>
											<p class='mui-ellipsis'>保养时间：2019-08-26 00:00</p>
										</div>
								</li>
								<li class="mui-table-view-cell mui-media">
										<div class="mui-media-object mui-pull-left color-unfinish"><span class="" style="">待保养</span></div>
										<div class="mui-media-body">
											<p class='mui-ellipsis mui-ellipsis-title'>20000L 蒸压釜</p>
											<p class='mui-ellipsis'>设备编码：0076</p>
											<p class='mui-ellipsis'>保养单号：BY-20190826001</p>
											<p class='mui-ellipsis'>保养人员：</p>
											<p class='mui-ellipsis'>保养时间：2019-08-26 00:00</p>
										</div>
								</li>
								<li class="mui-table-view-cell mui-media">
										<div class="mui-media-object mui-pull-left color-unfinish"><span class="" style="">待保养</span></div>
										<div class="mui-media-body">
											<p class='mui-ellipsis mui-ellipsis-title'>20000L 蒸压釜</p>
											<p class='mui-ellipsis'>设备编码：0076</p>
											<p class='mui-ellipsis'>保养单号：BY-20190826001</p>
											<p class='mui-ellipsis'>保养人员：</p>
											<p class='mui-ellipsis'>保养时间：2019-08-26 00:00</p>
										</div>
								</li>
								<li class="mui-table-view-cell mui-media">
										<div class="mui-media-object mui-pull-left color-unfinish"><span class="" style="">待保养</span></div>
										<div class="mui-media-body">
											<p class='mui-ellipsis mui-ellipsis-title'>20000L 蒸压釜</p>
											<p class='mui-ellipsis'>设备编码：0076</p>
											<p class='mui-ellipsis'>保养单号：BY-20190826001</p>
											<p class='mui-ellipsis'>保养人员：</p>
											<p class='mui-ellipsis'>保养时间：2019-08-26 00:00</p>
										</div>
								</li>
								<li class="mui-table-view-cell mui-media">
										<div class="mui-media-object mui-pull-left color-unfinish"><span class="" style="">待保养</span></div>
										<div class="mui-media-body">
											<p class='mui-ellipsis mui-ellipsis-title'>20000L 蒸压釜</p>
											<p class='mui-ellipsis'>设备编码：0076</p>
											<p class='mui-ellipsis'>保养单号：BY-20190826001</p>
											<p class='mui-ellipsis'>保养人员：</p>
											<p class='mui-ellipsis'>保养时间：2019-08-26 00:00</p>
										</div>
								</li>
								<li class="mui-table-view-cell mui-media">
										<div class="mui-media-object mui-pull-left color-unfinish"><span class="" style="">待保养</span></div>
										<div class="mui-media-body">
											<p class='mui-ellipsis mui-ellipsis-title'>20000L 蒸压釜</p>
											<p class='mui-ellipsis'>设备编码：0076</p>
											<p class='mui-ellipsis'>保养单号：BY-20190826001</p>
											<p class='mui-ellipsis'>保养人员：</p>
											<p class='mui-ellipsis'>保养时间：2019-08-26 00:00</p>
										</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>

		</div>

	</body>
	<script src="../../js/jquery-1.11.3.js"></script>
	<script src="../../../script/api.js"></script>
	<script src="../../js/mui.js"></script>
	<script type="text/javascript" charset="utf-8">
			mui.init();
			mui('body').on('tap','a',function(){
				window.top.location.href=this.href;
			});
			(function($) {
				$('#scroll').scroll({
					indicators: true //是否显示滚动条
				});
				var segmentedControl = document.getElementById('segmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if (this.checked) {
						var styleEl = document.querySelector('input[name="style"]:checked');
						var colorEl = document.querySelector('input[name="color"]:checked');
						if (styleEl && colorEl) {
							var style = styleEl.value;
							var color = colorEl.value;
							segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
						}
					}
				});
			})(mui);
			window.onload=function(){
				var openscan=document.getElementById("openscan");
				openscan.onclick=function(){
					openScan();
				}
			}
			//打开
			function openScan(){

				var FNScanner = api.require('FNScanner');
				FNScanner.open({
					autorotation: true,
					sound:"widget://res/scan.wav"
				}, function(ret, err) {
					if (ret) {
						// alert(JSON.stringify(ret));
						if('success' == ret.eventType){
							var content=ret.content;
							if(content.indexOf("http://")==0 || content.indexOf("https://")==0 || content.indexOf("/sys")==0){
								// window.location.href=content;
								window.location.href="../../public/saoyisao.html?ret="+JSON.stringify(ret);
							}else{
								alert(content);
							}
						}

					} else {
						alert(err.msg);
					}
				});
			}
			$(document).on("click","span.mui-pull-left",function(){
				window.location.href="../../../index.html";
			})
	</script>
</html>